<template>
    <div>
      <!-- 要复制的 HTML 内容 -->
      <div ref="contentToCopy" v-html="htmlContent">
      </div>
  
      <!-- 复制按钮 -->
      <button @click="copyFormattedContent">一键复制带格式内容</button>
  
      <!-- 隐藏的可编辑区域（用于模拟复制操作） -->
      <div
        ref="editableDiv"
        contenteditable="true"
        style="position: absolute; left: -9999px; top: -9999px;"
      ></div>
      <editor id="editor_id" height="500px" width="100%" :content.sync="editorText"
        :afterChange="afterChange()"
        :afterBlur="afterBlur"
        :loadStyleMode="false"
        :uploadJson="uploadJson"
        @on-content-change="onContentChange"></editor>
        <div> editorTextCopy: {{ editorTextCopy }} </div>

    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        htmlContent: '<p style="mso-para-margin-top:0.2500gd;mso-para-margin-bottom:0.2500gd;text-indent:28.0000pt;mso-char-indent-count:2.0000;line-height:21.0000pt;mso-line-height-rule:exactly;"><span>受自治区食品药品审评查验中心委派，由</span><span>XX、XX、XX组成审评组，于2024年6月X日～X日对XXXX有限公司</span>（审评范围）的生产和质量管理情况开展了<span>药品</span><span>GMP符合性</span>审评，审评情况如下：</p>',
        uploadJson:'', //上传图片的接口地址
        editorText: '', // 双向同步的变量
        editorTextCopy: '', // content-change 事件回掉改变的对象
        content:'<span style="background-color:#E53333;color:red;">直接初始化值</span><span style="display:none;"></span>'
      };
    },
    methods: {
        onContentChange (val) {
            this.editorTextCopy = val;
            window.console.log(this.editorTextCopy)
        },
        afterChange () {
        },
        getTextToCopy(){
            var el =this.$refs.contentToCopy.innerText || this.$refs.contentToCopy.textContent;
            try {
                const textToCopy = this.$refs.contentToCopy.innerText || this.$refs.contentToCopy.textContent
                navigator.clipboard.writeText(this.content);
                alert('复制成功！');
            } catch (err) {
                console.error('无法复制文本: ', err);
            }
        },
        afterBlur(val){
            //console.log('我失去焦点后',this.editorText)
        },
      copyFormattedContent() {
        // 将 HTML 内容设置为可编辑区域的 innerHTML
        this.$refs.editableDiv.innerHTML = this.htmlContent;
  
        // 选择可编辑区域的内容
        const range = document.createRange();
        range.selectNodeContents(this.$refs.editableDiv);
        const selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
  
        try {
          // 尝试复制内容到剪贴板（这里只复制纯文本，因为直接复制 HTML 是不安全的）
          // 注意：这里只是复制了纯文本，如果你想要复制 HTML，需要目标编辑器支持
          document.execCommand('copy');
          alert('已复制带格式内容到剪贴板！');
        } catch (err) {
          // 处理复制失败的情况
          console.error('复制失败：', err);
        }
  
        // 清除选择
        selection.removeAllRanges();
      }
    }
  };
  </script>
   